<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      .paginaction {
        display: flex;
        height: 36px;
      }

      .paginaction .btn {
        margin: 0 5px;
        min-width: 36px;
        padding: 0 10px;
        height: 36px;
        line-height: 36px;
        text-align: center;
        border: 1px solid #000;
        cursor: pointer;
      }

      .paginaction .btn.active {
        background-color: #000;
        color: #fff;
      }

      .paginaction .btn.disabled {
        opacity: 0.1;
      }
    </style>
  </head>
  <body>
    <!-- 
    实现一个分页组件

      调用如下：

        <Pagination v-model:page="page" v-model:pageSize="pageSize" :total="total"  />

   -->

    <div id="app"></div>

    <script src="../lib/vue3.js"></script>
    <script>
      const app = Vue.createApp({
        template: `
          <div>
            <h1>分页器</h1>

            <Paginaction 
              :page="page" 
              :pageSize="pageSize" 
              :total="total" 
              @update:page="page = $event"
              @update:pageSize="pageSize = $event"
              />

            <hr />

            <Paginaction 
              v-model:page="page"
              v-model:pageSize="pageSize"
              :total="total"
              />
          </div>
        `,

        data() {
          return {
            page: 1,
            pageSize: 10,
            total: 51,
          };
        },
      });

      app.component("Paginaction", {
        props: {
          page: {
            type: Number,
            required: true,
          },

          // 每页显示多少条
          pageSize: {
            type: Number,
            required: true,
          },

          // 总的数据条数
          total: {
            type: Number,
            required: true,
          },
        },

        emits: ["update:page", "update:pageSize"],

        computed: {
          // 多少页
          pages() {
            return Math.ceil(this.total / this.pageSize);
          },
        },

        template: `
          <div class="paginaction">
            <select @change="handleChange">
              <option>10</option>
              <option>20</option>
              <option>30</option>
            </select>

            <div class="btn prev" :class="{ disabled: page === 1 }" @click="handleClick(page - 1)">上一页</div>

            <div class="btn" :class="{ active: item === page }" 
              v-for="item in pages" :key="item"
              @click="handleClick(item)"
              >
              {{ item }}  
            </div>

            <div class="btn next" :class="{ disabled: page === pages }" @click="handleClick(page + 1)">下一页</div>
          </div>
        `,

        methods: {
          handleClick(num) {
            // 边界控制
            if (num <= 0 || num > this.pages) {
              return;
            }

            console.log("num", num);
            // 触发自定义事件，让父组件去修改
            this.$emit("update:page", num);
          },

          // 每页显示条数修改
          handleChange(event) {
            console.log(event.target.value);
            const value = event.target.value;

            // 触发自定义事件，让父组件去修改
            this.$emit("update:pageSize", +value);
          },
        },
      });

      app.mount("#app");
    </script>
  </body>
</html>
